<template>
    <div class="radar-echart">
        <l-echart ref="chartRef"></l-echart>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { nextTick } from 'vue';
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
import echarts from '@/utils/echarts.js'

const props = defineProps({
    reportData: {
        type: Object,
        default: () => ({})
    }
})

const chartRef = ref<any>(null)

const initChart = () => {
    const option = {
        radar: {
            indicator: [
                { name: '健康基础分析', max: 100 },
                { name: '心理与社会活力', max: 100 },
                { name: '运动能力与耐力', max: 100 },
                { name: '体态与功能性', max: 100 },
                { name: '运动安全', max: 100 },
            ],
            name: {
                textStyle: {
                    color: '#666666'
                }
            },
        },
        grid: { // 调整图表边距
            top: '15%',
            left: '10%',
            right: '8%',
            bottom: '18%'
        },
        series: [
            {
                type: 'radar',
                symbol: "none",//不显示节点
                lineStyle: {
                    color: '#7362A8'
                },
                data: [{
                    value: [props.reportData.ovBasicHealth.score, 
                        props.reportData.ovSocialAbility.score,
                        props.reportData.ovSportAbility.score,
                        props.reportData.ovHealthAssessment.score, 
                        props.reportData.ovSportRisk.score],
                    }]
            }
        ]
    }
    chartRef.value.init(echarts, (chart: any) => {
        chart.setOption(option);
    });
}

onMounted(() => {
    nextTick(() => {
        initChart()
    })
})
</script>

<style scoped lang="scss">
.radar-echart {
    width: 700rpx;
    height: 450rpx
}
</style>
